<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <script src="./static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <th:block th:include="include :: header('新增子商品')" />

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add" enctype="multipart/form-data" >
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">子商品名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="name" id="name" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">价格：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="price" id="price" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">库存：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="stock" id="stock" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">上传图片：</label>
            <p class="avatar-img">
            <div style="width: 120px;height: 90px">
                <a href="#" class="addwordExperience"  v-show='!imgshow' style="padding-left:45px;height: 95px;line-height: 95px;font-size: 26px;color: #bbb;position: absolute;width: 140px;">+</a>
                <img class="middleFace" id="showimg"  alt="" style="width: 120px;height:90px;position: absolute;">
                <input class="addwordExperience" id="img" onchange="changepic(this)" type="file" style="height: 90px;width: 120px;opacity:0; position: absolute; left:250px" multiple="multiple"/>
            </div>
            </p>
        </div>
        <div class="layui-upload">
<!--            <button type="button" class="layui-btn" id="test1">上传图片</button>-->
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>



        <!--			大小-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">规格：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="size" id="size" required>
            </div>
        </div>
        <!--			颜色-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label is-required">颜色：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input class="form-control" type="text" name="color" id="color" required>-->
<!--            </div>-->
<!--        </div>-->
        <!--			详细信息info-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">详细信息：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="info" id="info" required>
            </div>
        </div>
        <!--			从分类表里面读取-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">状态：</label>
            <div class="col-sm-8">
                <!--					下拉框，从数据库中读取分类数据-->
                <select class="form-control" id="state" name="state">
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    function changepic() {

        var reads= new FileReader();

        f=document.getElementById('img').files[0];

        console.log(f);

        reads.readAsDataURL(f);

        reads.onload=function (e) {
            document.getElementById('showimg').src=this.result;
            content.imgshow = true;
        };
    }
    var prefix = ctx + "water";
    function submitHandler() {
        const img = document.getElementById("img").files[0];
        console.log(img);
        var form = $('#form-product-add')[0];
        console.log(form);
        var data = new FormData(form);
        console.log(data);
        data.append('headImg', img);
        console.log(data.get('headImg'));
        var id = [[${id}]];
        var url = "/addChildProduct/"+id;
        $.operate.save1(prefix + url,data);
    }



</script>



</body>
</html>
